<script setup lang="ts">
import type { CoursePageInfoResult, ResOptions, Subject, SubjectClassification } from '~~/types/types'

const ages = ['全年龄端', '0~1岁', '1~2岁', '2~3岁', '3~4岁', '4~5岁', '5~6岁']
const { public: { apiBase } } = useRuntimeConfig() // 3.0正式版环境变量要从useRuntimeConfig里的public拿
const searchObj = ref({
  subjectParentId: '',
  subjectId: '',
  buyCountSort: '',
  gmtCreateSort: '',
  priceSort: '',
  age: -1,
})
const userStore = useUserStore()

const { data: course } = await useFetch(
  apiBase + 'preschool/courses/1/8?type=0',
  {
    // @ts-ignore
    pick: ['result'],
    headers: {
      Authorization: userStore.getToken,
      LoginType: 'User'
    },
    method: 'post',
    body: searchObj
  }
)
const { data: subject } = await useFetch(
  `${apiBase}admin/subject/getSubject`,
  {
    // @ts-ignore
    pick: ['result'],
    headers: { "LoginType": "User" }
  }
)
let courseList = (course.value as ResOptions<CoursePageInfoResult>).result as CoursePageInfoResult
const subjectNestedList = (subject.value as ResOptions<SubjectClassification>).result?.subjectClassification as Subject[]

const all = ref('1')
const oneIndex = ref(-1)
const twoIndex = ref(-1)
const buyCountSort = ref('')
const gmtCreateSort = ref('')
const priceSort = ref('')
const subAll = ref('1')
const ageIndex = ref(0)
const subSubjectList = ref<Subject[]>([])

const getAll = () => {
  subSubjectList.value = []
  all.value = '1'
  subAll.value = '1'
  searchObj.value = {
    subjectParentId: '',
    subjectId: '',
    buyCountSort: '',
    gmtCreateSort: '',
    priceSort: '',
    age: -1
  }
  oneIndex.value = -1
  twoIndex.value = -1
  gotoPage(1)
}
const gotoPage = (currentPage: number) => {
  http.post(`preschool/courses/${currentPage}/8?type=0`, searchObj.value)
    .then(res => {
      courseList.items = res.items
      courseList.current = res.current
      courseList.hasNext = res.hasNext
      courseList.hasPrevious = res.hasPrevious
      courseList.pages = res.pages
      courseList.size = res.size
      courseList.total = res.total
    })
}
const searchOne = (id: string, indexOne: number) => {
  oneIndex.value = indexOne
  all.value = ''
  subAll.value = '1'
  twoIndex.value = -1
  subSubjectList.value = []
  console.log(id);

  searchObj.value.subjectParentId = id
  searchObj.value.subjectId = ''

  gotoPage(1)
  for (let i = 0; i < subjectNestedList.length; i++) {
    if (subjectNestedList[i].key === id) {
      subSubjectList.value = subjectNestedList[i].children
    }
  }
}
const searchTwo = (id: string, indexTwo: number) => {
  all.value = ''
  twoIndex.value = indexTwo
  searchObj.value.subjectId = id
  gotoPage(1)
}
const searchAge = (index: number) => {
  ageIndex.value = index
  searchObj.value.age === 0 ? -1 : index
  gotoPage(1)
}
const getSubAll = () => {
  subAll.value = '1'
  searchObj.value = {
    subjectParentId: '',
    subjectId: '',
    buyCountSort: '',
    gmtCreateSort: '',
    priceSort: '',
    age: -1
  }
  twoIndex.value = -1
  gotoPage(1)
}
const searchBuyCount = () => {
  priceSort.value = ''
  gmtCreateSort.value = ''
  buyCountSort.value = '1'
  all.value = ''

  searchObj.value.priceSort = ''
  searchObj.value.gmtCreateSort = ''
  searchObj.value.buyCountSort = '1'
  gotoPage(1)
}
const searchPrice = () => {
  priceSort.value = '1'
  gmtCreateSort.value = ''
  buyCountSort.value = ''
  all.value = ''

  searchObj.value.priceSort = '1'
  searchObj.value.gmtCreateSort = ''
  searchObj.value.buyCountSort = ''
  gotoPage(1)
}
const searchGmtCreate = () => {
  priceSort.value = ''
  gmtCreateSort.value = '1'
  buyCountSort.value = ''
  all.value = ''

  searchObj.value.priceSort = ''
  searchObj.value.gmtCreateSort = '1'
  searchObj.value.buyCountSort = ''
  gotoPage(1)
}
</script>
<template>
  <div id="aCoursesList" class="bg-fa">
    <!-- /课程列表 开始 -->
    <section class="container">
      <header class="comm-title">
        <h2 class="fl tac">
          <span class="c-333">全部课程</span>
        </h2>
      </header>
      <section class="c-sort-box">
        <section class="c-s-dl">
          <dl>
            <dt>
              <span class="c-999 fsize14">课程类别</span>
            </dt>
            <dd class="c-s-dl-li">
              <ul class="clearfix">
                <li :class="{ active: all != '' }"><!--class="current"-->
                  <a title="全部" href="#" @click.prevent="getAll">全部</a>
                </li>
                <li v-for="(subjectOne, index) in subjectNestedList" :key="index" :class="{ active: oneIndex === index }">
                  <a :title="subjectOne.title" href="#" @click.prevent="searchOne(subjectOne.key, index)">{{
                    subjectOne.title }}</a>
                </li>
              </ul>
            </dd>
          </dl>
          <dl>
            <dt>
              <span class="c-999 fsize14">二级分类</span>
            </dt>
            <dd class="c-s-dl-li">
              <ul class="clearfix">
                <li :class="{ active: subAll != '' }">
                  <a title="全部" href="#" @click.prevent="getSubAll">全部</a>
                </li>
                <li v-for="(subject, index) in subSubjectList" :key="index" :class="{ active: twoIndex === index }">
                  <a :title="subject.title" href="#" @click.prevent="searchTwo(subject.key, index)">{{ subject.title
                  }}</a>
                </li>
              </ul>
            </dd>
          </dl>
          <dl>
            <dt>
              <span class="c-999 fsize14">年龄段</span>
            </dt>
            <dd class="c-s-dl-li">
              <ul class="clearfix">
                <li v-for="(age, index) in ages" :key="index" :class="{ active: ageIndex === index }">
                  <a href="#" @click.prevent="searchAge(index)">{{ age }}</a>
                </li>
              </ul>
            </dd>
          </dl>
          <div class="clear"></div>
        </section>
        <div class="js-wrap">
          <section class="fr">
            <span class="c-ccc">
              <i class="c-master f-fM">1</i>/
              <i class="c-666 f-fM">1</i>
            </span>
          </section>
          <section class="fl">
            <ol class="js-tap clearfix">
              <li :class="{ 'current bg-orange': buyCountSort != '' }">
                <a title="销量" href="#" @click.prevent="searchBuyCount">销量
                  <span :class="{ hide: buyCountSort == '' }">↓</span>
                </a>

              </li>
              <li :class="{ 'current bg-orange': gmtCreateSort != '' }">
                <a title="最新" href="#" @click.prevent="searchGmtCreate">最新
                  <span :class="{ hide: gmtCreateSort == '' }">↓</span>
                </a>

              </li>
              <li :class="{ 'current bg-orange': priceSort != '' }">
                <a title="价格" href="#" @click.prevent="searchPrice">价格&nbsp;
                  <span :class="{ hide: priceSort == '' }">↓</span>
                </a>
              </li>
            </ol>
          </section>
        </div>
        <div class="mt40">
          <!-- /无数据提示 开始-->
          <section v-if="courseList.total == 0" class="no-data-wrap">
            <em class="icon30 no-data-ico">&nbsp;</em>
            <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
          </section>
          <!-- /无数据提示 结束-->
          <article v-if="courseList.total > 0" class="comm-course-list">
            <ul id="bna" class="of">
              <li v-for="item in courseList.items" :key="item.id">
                <div class="cc-l-wrap">
                  <section class="course-img">
                    <img :src="item.cover" class="img-responsive" :alt="item.title" />
                    <div class="cc-mask">
                      <a :href="'/course/' + item.id" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                    </div>
                  </section>
                  <h3 class="hLh30 txtOf mt10">
                    <a :href="'/course/' + item.id" :title="item.title" class="course-title fsize18 c-333">{{ item.title
                    }}</a>
                  </h3>
                  <section class="mt10 hLh20 of">
                    <span class="fr jgTag bg-green">
                      <i class="c-fff fsize12 f-fA">{{
                        item.price === 0 ? '免费' : item.price
                      }}</i>
                    </span>
                    <span class="fl jgAttr c-ccc f-fA">
                      <i class="c-999 f-fA">{{ item.viewCount }}人学习</i>
                      |
                      <i class="c-999 f-fA">9634评论</i>
                    </span>
                  </section>
                </div>
              </li>
            </ul>
            <div class="clear"></div>
          </article>
        </div>
        <!-- 公共分页 开始 -->
        <div>
          <div class="paging">
            <!-- undisable这个class是否存在，取决于数据属性hasPrevious -->
            <a :class="{ undisable: !courseList.hasPrevious }" href="#" title="首页" @click.prevent="gotoPage(1)">首</a>
            <a :class="{ undisable: !courseList.hasPrevious }" href="#" title="前一页"
              @click.prevent="gotoPage(courseList.current - 1)">&lt;</a>
            <a v-for="page in courseList.pages" :key="page" :class="{
              current: courseList.current == page,
              undisable: courseList.current == page,
            }" href="#" :title="'第' + page + '页'" @click.prevent="gotoPage(page)">{{ page }}</a>
            <a :class="{ undisable: !courseList.hasNext }" href="#" title="后一页"
              @click.prevent="gotoPage(courseList.current + 1)">&gt;</a>
            <a :class="{ undisable: !courseList.hasNext }" href="#" title="末页"
              @click.prevent="gotoPage(courseList.pages)">末</a>
            <div class="clear"></div>
          </div>
        </div>
        <!-- 公共分页 结束 -->
      </section>
    </section>
    <!-- /课程列表 结束 -->
  </div>
</template>

<style>
.active {
  background: #bdbdbd;
}

.hide {
  display: none;
}

.show {
  display: block;
}
</style>
